<template>

    <div>
        <userNav></userNav>
        <div class="banner"><swiperDemo></swiperDemo></div>
       <div class="content">
        <router-link  :to="{path:'/video',query:{title:item.title,context:item.context,id:item.id,imgSrc:item.imgSrc,videoSrc:item.videoSrc}}"  :key="item.id" v-for="item in searchs" class="box" >
            <!-- <myContent :title="item.title" :context="item.context"></myContent> -->
            <foundation :title="item.title" :context="item.context" :imgSrc="'http://localhost:8889'+'/'+item.imgSrc+'.jpg'"></foundation>
            
          </router-link>   
       </div>
          
        </div>
    
    
    </template>
    
  
    <script>
    import userNav from "../views/userNav.vue"
  import foundation from "../components/foundation.vue"
  import swiperDemo from "./swiperDemo.vue"
    export default{
      components:{
         foundation,
         swiperDemo,
         userNav
      },
      data(){
         return {
            dataArr:[
         
         ]
  
  
        }
         
      },
      created()
      {
        this.$axios.get(this.$host+"/Blood").then(res=>{
              this.dataArr=res.data
              // console.log(res.data)
        })
      },
     computed:{
        searchs(){
               if(this.inputValue!=""){
                 return this.dataArr.filter(value=>{
                     return value.title.indexOf(this.$store.state.movie.searchValue)!==-1 
                 })
                
  
               }else{
                 return this.dataArr
               }
  
                
            
              //  if(this.inputValue==""){
              //      return this.dataArr
              //  }
              // return this.dataArr.filter((value)=>{
              //      return value.title.indexOf(this.$store.state.movie)!==-1
                  
              // }) 
           },
          
  
      }
    
    
    }
    
    
    </script>
    
    
    <style scoped>
       a{
        text-decoration: none;
        color: blue;
    }
    
    .box{
      margin-left:30px;
      margin-top: 80px;
    }
    
    .banner{
         margin-top: 60px;
      }
      
      .content{
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         margin-top: 50px;
      
      }
      
    
    
    </style>